<template>
	<view style="padding: 40rpx;">
		<!-- 地址栏 -->
		<view class="address">
			<text>{{username}} {{phone}}<br /><text style="color: #9da4ac;font-size: 30rpx;">{{address}}</text></text>
			<u-icon name="arrow-right"></u-icon>
		</view>
		<!-- 订单详情 -->
		<view class="content">
			<image src="../../static/image/4.jpg" mode="aspectFill" style="width: 220rpx;height: 220rpx;margin-right: 30rpx;"></image>
			<view class="">
				<text>{{name}}</text><br/>
				<text>{{a}}积分</text>
				<u-number-box v-model="value" @change="valChange"></u-number-box>
			</view>
		</view>
		下单备注
		<u-textarea style="margin: 30rpx 0;" placeholder="填写备注,例如:尽快发货"></u-textarea>
		<view style="display: flex;justify-content: space-between;">
			<text>商品总额</text>
			<text>￥{{sum}}</text>
		</view>
		<view style="position: fixed;bottom: 0;padding: 30rpx 0;display: flex;justify-content: space-between;width: 960rpx;align-items: center;font-size: 40rpx;">
			<text>实付积分：{{sum}}</text>
			<button type="default" style="border: none;background-color: #00c297;color: #ffffff;" size="mini">兑换</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '张三',
				phone: '12233456789',
				address: '湖南省长沙市天心区',
				value: 1,
				name:'环保单肩包',
				a:3
				
			}
		},
		methods: {
			valChange(e) {
				console.log('当前值为: ' + e.value)
			}
		},
		computed:{
			sum:function(){
				return this.value*this.a
			}
		}
	}
</script>

<style>
	.address {
		display: flex;
		justify-content: space-between;
		font-size: 33rpx;
		padding: 0 30rpx 30rpx 30rpx;
		border-bottom: #dce5ef 1rpx solid;
	}
	.content{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 30rpx 0;
		line-height: 70rpx;
	}
</style>
